import React, { Component } from 'react';
import { withStyles, createStyles } from "@material-ui/core/styles";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import EditIcon from '@material-ui/icons/Edit';
import Grid from '@material-ui/core/Grid';
import { withRouter } from 'react-router-dom'


const useStyles = createStyles({
    table: {
        minWidth: 650,
    },
});
/**
 * 展示选择某课程的班级的信息列表
 */
class ClassTable extends Component {
    constructor(props) {
        super(props);
        this.query = this.props.location.query;//传入的参数
        //测试数据,防止每次刷新都无数据导致报错
        if(!this.query){
            this.query = {
                "_id": "5f4e1e3102e91822e86f38da",
                "courseid": "2.1",
                "coursenumber": "2",
                "coursekind": "必修课",
                "coursename": "软件详细设计",
                "teachernumber": "1",
                "assessmentmethod": "考试",
                "classlist": [
                    "2017240206",
                    "2017240207"
                ],
                "term": "2020-2021第一学期",
                "status": 0,
                "gradepecents": null
            }
        }

        this.state = {
            data:{
                classlist : this.query.classlist,
                coursename : this.query.coursename,
                classnumber : this.query.coursenumber,
                teachernumber:this.query.teachernumber,
                term:this.query.term,
            },
            thead: [
                '班级名',
                '操作',
            ],
        }
    }

    /**
     * 处理“录入成绩”按钮点击事件
     * @param {班级号} classes 
     */
    handleInputBtnClick = (event,classnumber)=>{
        let data={
            classnumber:classnumber,
        }
        Object.assign(data,this.query);//将本身的数据传入
        //路由跳转
        this.props.history.push({
            pathname:'/studentTable',
            query:data
        });

    }

    render() { 
        const { classes } = this.props;
        return ( 
            <TableContainer component={Paper} >
                
                <Table className={classes.table} aria-label="caption table">
                    <caption>
                        课程名：{this.state.data.coursename}
                        <br/>
                        学期：{this.state.data.term}
                    </caption>
                    {/**表头 */}
                    <TableHead>
                        <TableRow>
                            {this.state.thead.map(
                                (item, index) =>
                                    <TableCell key={index}>{item}</TableCell>
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {this.state.data.classlist.map((row,index) => (
                            <TableRow key={index}>
                                <TableCell >{row}</TableCell>
                                <TableCell >
                                    <Grid container spacing={1}>
                                        <Grid item>
                                            <Button
                                                variant="contained"
                                                color="primary"
                                                className={classes.button}
                                                endIcon={<EditIcon>send</EditIcon>}
                                                onClick={(e)=>this.handleInputBtnClick(e,row)}
                                            >
                                                录入成绩
                                        </Button>
                                        </Grid>
                                    </Grid>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        );
    }
}
 
export default withRouter(withStyles(useStyles)(ClassTable));